<template>
    <div class="myheader">
        <div class="mheader" v-if="!isMobile" :style="{ borderBottom: borderTop ? '1px solid #D6D6D6' : '' }">
            <div class="logo-box" @click="goPage('/index')">
                <img class="logo" src="@/assets/img/LOGO.svg" alt="" style="cursor: pointer;">
            </div>
            <div class="classify">
                <span @click="goPage('/index')" :class="{ active: path == '/index' }">首页</span>
                <span @click="goPage('/interact')"
                    :class="{ active: path.includes('/highQuality') || path.includes('/association') || path.includes('/shareClub') || path.includes('/firendCircle') || path.includes('/interact') || path.includes('/Ranking') }">社群</span>
                <span @click="goPage('/resource/column')" :class="{ active: path == '/resource/column' }">资源库</span>
            </div>
            <div class="search">
                <input type="text" placeholder="请输入关键词" placeholder-class="pla" v-model="keyword"
                    @keyup.enter="goSearch">
                <img src="@/assets/img/search.svg" alt="" @click="goSearch" style="cursor: pointer;">
            </div>
            <div class="column">
                <span @click="goPage('/columnPost/library')"
                    :class="{ active: path.includes('/columnPost/library') }">发布</span>
                <span @click="goPage('/column/basic')" :class="{ active: path.includes('/column/basic') }">创建</span>
                <span @click="goPage('/notice/messages')" :class="{ active: path.includes('/notice') }">通知</span>
                <span @click="goPage('/promotion/article')" :class="{ active: path.includes('/promotion') }">推广</span>

                <span @click="goPage('/moneyBag/myBag')" :class="{ active: path.includes('/moneyBag') }">钱包</span>
                <span @click="goPage('/knowledge')" :class="{ active: path.includes('knowledge') }">知识仓</span>
            </div>
            <div class="loginBtn">
                <div class="logignBtn" @click="openPop" v-if="!is_online">登录/注册</div>
                <div class="logignBtn" @click="checkSHowINfo" v-if="is_online"><span>{{ userInfo ?
                    userInfo.user_nickname : '' }}</span><i class="el-icon-arrow-down" />
                    <div :class="{ dropdown: true, activeDown: showInfo }">
                        <span @click.stop="command(1)">个人资料</span>
                        <span @click.stop="command(2)">退出登录</span>
                    </div>
                </div>
                <!-- <el-dropdown placement="bottom" @command="command" trigger="click">
                   
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1"><span style="white-space:nowrap;">个人资料</span></el-dropdown-item>
                        <el-dropdown-item command="2"><span style="white-space:nowrap;">退出登录</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->

            </div>

        </div>
        <div class="dialog">
            <el-dialog :top="isMobile ? '10vh' : '3vh'" :modal-append-to-body="false" :visible.sync="dialogVisible"
                :width="isMobile ? '90%' : '50%'" center :close-on-click-modal="false">
                <div class="dia_main">
                    <div class="left" v-if="!isMobile">
                        <div class="title">
                            {{ list[0] ? list[0].title : '' }}
                        </div>
                        <!-- <img src="@/assets/img/code.png" alt=""> -->
                        <wx-login :appid="wxAppId" :redirect-uri="wxRedirectUri" theme="black" />

                        <div class="we">
                            <img src="@/assets/img/chat.png" alt="">
                            <span>微信扫码</span>
                            可免注册登录
                        </div>
                        <a target="_blank" :href="list[0] ? list[0].url : ''" class="collect">
                            <img src="@/assets/img/right_fill.png" alt="">
                            {{ list[0] ? list[0].introd : '' }}
                        </a>
                    </div>
                    <div class="right" :style="{ width: isMobile ? '100%' : '50%' }">
                        <p class="title">
                            账号登录
                        </p>
                        <div class="input">
                            <el-input type="text" placeholder="请输入主题客账号" v-model="account" />
                            <el-input type="password" placeholder="请输入主题客密码" v-model="password" />
                            <div class="check">
                                <el-checkbox v-model="checked">30天免密登录</el-checkbox>
                                <span @click="openReset"> 忘记密码</span>
                            </div>
                        </div>
                        <el-button type="primary" round @click="login">登录</el-button>
                        <div class="resj" @click="openResj">注册主题客账号</div>
                    </div>
                </div>
            </el-dialog>
            <el-dialog :top="isMobile ? '10vh' : '3vh'" :modal-append-to-body="false" :visible.sync="dialogVisible2"
                :width="isMobile ? '90%' : '30%'" center :close-on-click-modal="false">
                <div class="dia_main2">
                    <div class="right">
                        <p class="title">
                            账号注册
                        </p>
                        <div class="input">
                            <el-input type="text" placeholder="请输入用户名" v-model="account" @blur="checkAccount" />
                            <el-input type="password" placeholder="请输入密码" v-model="password" />
                            <el-input type="password" placeholder="请确认密码" v-model="userpass" />
                            <el-input type="text" placeholder="请输入昵称" v-model="uname" />

                            <el-input type="text" v-loading="loading" placeholder="请输入验证码" v-model="code" :maxlength="6"
                                v-show="is_mobile == 1">
                                <template slot="append">
                                    <span @click="getDown(0)" :style="{ cursor: downtime == 60 ? 'pointer' : '' }"
                                        class="getCode">{{ downtime == 60 ? '获取验证码' : downtime + '秒后重新发送' }}</span>
                                </template>
                            </el-input>

                        </div>
                        <el-button type="primary" round @click="register">注册</el-button>
                        <div class="resj" @click="openLogin">已有账号，登录主题客账号</div>
                    </div>
                </div>
            </el-dialog>
            <el-dialog :top="isMobile ? '10vh' : '3vh'" :modal-append-to-body="false" :visible.sync="dialogVisible3"
                :width="isMobile ? '90%' : '33%'" center :close-on-click-modal="false">
                <div class="dia_main3">
                    <div class="right">
                        <p class="title">
                            重置密码
                        </p>
                        <div class="input">
                            <el-input type="number" placeholder="请输入手机号码" v-model="account" :maxlength="11" />
                            <el-input type="password" placeholder="请输入新密码" v-model="password" />
                            <el-input type="number" v-loading="loading" placeholder="请输入验证码" v-model="code"
                                :maxlength="6">
                                <template slot="append">
                                    <span @click="getDown(1)" :style="{ cursor: downtime == 60 ? 'pointer' : '' }"
                                        class="getCode">{{ downtime == 60 ? '获取验证码' : downtime + '秒后重新发送' }}</span>
                                </template>
                            </el-input>
                            <!-- <el-input type="password" placeholder="请确认新密码" v-model="sureword" /> -->

                            <!-- <div class="check">
                                <el-checkbox v-model="checked">立即登录</el-checkbox>
                                <span> 忘记密码</span>
                            </div> -->
                        </div>
                        <el-button type="primary" round @click="forget">确定</el-button>
                        <div class="resj" @click="openLogin">去登录</div>
                    </div>
                </div>
            </el-dialog>
            <el-dialog :top="isMobile ? '10vh' : '3vh'" :modal-append-to-body="false" :visible.sync="dialogVisible4"
                :width="isMobile ? '90%' : '48%'" @close="beforeClose" :close-on-click-modal="false">
                <span slot="title" class="dialog-header">
                    <i style="color:#1068E7;margin-right: 5px;" class="iconfont">&#xe638;</i>账号管理
                </span>
                <div class="dia4">
                    <el-form ref="form" :model="form" label-width="7.29vw">
                        <div class="upload">
                            <el-form-item label="背景图">
                                <label>
                                    <div style="display: flex;">
                                        <input type="file" @change="onUploadbg" accept="image/*">
                                        <div v-if="!bgimage">
                                            <i class="el-icon-plus bg-uploader-icon"></i>
                                        </div>
                                        <div v-else class="bg-uploader-icon" style="border: none;">
                                            <el-image v-if="bgimage" class="bg-uploader-icon" style="border: none;"
                                                :src="bgimage">
                                            </el-image>
                                        </div>
                                        <span> （1400*200px）</span>

                                    </div>
                                </label>
                            </el-form-item>
                        </div>
                        <div class="upload">
                            <el-form-item label="头像">
                                <label>
                                    <input type="file" @change="onUpload" accept="image/*">
                                    <div v-if="!imageUrl">
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                                    <div v-else class="avatar-uploader-icon" style="border: none;">
                                        <el-image class="avatar-uploader-icon" style="border: none;" :src="imageUrl">
                                        </el-image>
                                    </div>
                                </label>
                            </el-form-item>
                        </div>
                        <div class="borBom">
                            <el-form-item label="昵称">
                                <el-input type="text" v-model="form.user_nickname" placeholder=""></el-input>
                            </el-form-item>
                        </div>
                        <div class="borBom">
                            <el-form-item label="个性签名">
                                <el-input type="textarea" v-model="form.signature" placeholder=""></el-input>
                            </el-form-item>
                        </div>
                        <div class="borBom">
                            <el-form-item label="主题号">
                                <el-input v-model="form.account" placeholder=""></el-input>
                            </el-form-item>
                        </div>
                        <div class="borBom">
                            <el-form-item label="设置密码">
                                <el-input v-model="form.password" type="password"
                                    placeholder="请输入密码,最少6位,最多不超过32位"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item label="性别">
                            <el-radio v-model="form.sex" :label="0">保密</el-radio>
                            <el-radio v-model="form.sex" :label="1">男</el-radio>
                            <el-radio v-model="form.sex" :label="2">女</el-radio>
                        </el-form-item>
                        <el-form-item label="手机号码">
                            <div class="set">
                                <el-input readonly v-model="form.mobile" placeholder=""></el-input>
                                <span class="btn" v-if="form.is_mobile == 1" @click="changeIsMobile(0)">取消</span>
                                <span v-else class="btn" @click="changeIsMobile(1)">更换</span>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="form.is_mobile == 1" class="borBom" label="新手机号码">
                            <el-input :maxlength="11" v-model="form.newphone" placeholder=""></el-input>
                        </el-form-item>
                        <div class="borBom borBom2" v-if="form.is_mobile == 1">
                            <el-form-item v-loading="loading">
                                <!-- <el-input :maxlength="3" type="number" placeholder="" v-model="form.code"></el-input> -->
                                <el-input :maxlength="6" v-model="form.code" placeholder="">

                                    <template slot="append">
                                        <span @click="getDown2" :style="{ cursor: downtime2 == 60 ? 'pointer' : '' }"
                                            class="getCode">{{
                                                downtime2 == 60 ? '获取验证码' : downtime2 + '秒后重新发送'
                                            }}</span>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </div>
                        <el-form-item label="微信绑定">
                            <div class="set">
                                <!-- <el-input readonly v-model="form.wx" disabled></el-input> -->
                                <span v-if="form.openid">已绑定微信</span>
                                <span v-if="!form.openid">未绑定微信</span>
                                <div style="margin-left: 10px;"></div>
                                <span v-if="!form.openid" @click="dialogVisible5 = true">立即绑定</span>
                                <span v-if="form.openid" @click="dialogVisible5 = true">重新绑定</span>

                            </div>
                        </el-form-item>

                    </el-form>

                </div>
                <el-form label-width="7.29vw">
                    <div class="select">
                        <el-form-item>
                            <el-checkbox v-model="form.is_auth">机构用户认证</el-checkbox>
                            <label v-if="form.is_auth">
                                <input style="display: none;" type="file" @change="onUploadauth">
                                <div @click="choseFile" class="qfile">
                                    <div v-if="!auimage">
                                        上传图片
                                        <!-- <i class="el-icon-plus bg-uploader-icon"></i> -->
                                    </div>
                                    <div v-else class="bg-uploader-icon" style="border: none;">
                                        <el-image v-if="auimage" class="bg-uploader-icon" style="border: none;"
                                            :src="auimage">
                                        </el-image>
                                    </div>
                                    <span>(如果你是组织机构用户，请上传营业执照或盖有单位公章的证明文件)</span>
                                </div>
                            </label>
                        </el-form-item>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="onsubmit2">保存</el-button>
                </span>
            </el-dialog>
            <el-dialog top="3vh" :modal-append-to-body="false" :visible.sync="dialogVisible5" width="20%">
                <span slot="title" class="dialog-header">
                    <i style="color:#1068E7;margin-right: 5px;" class="iconfont">&#xe638;</i>微信绑定
                </span>
                <div style="display: flex;align-items: center;justify-content: center;">
                    <wx-login :appid="wxAppId" :redirect-uri="wxRedirectUri" theme="black" />
                </div>

            </el-dialog>
        </div>
        <div class="mobheader" v-if="isMobile">
            <div class="logo-box" @click="goPage('/index')">
                <img class="logo" src="@/assets/img/LOGO.svg" alt="" style="cursor: pointer;">
            </div>
            <div class="right">
                <div class="search">
                    <input type="text" placeholder="请输入关键词" placeholder-class="pla" v-model="keyword"
                        @keyup.enter="goSearch">
                    <img src="@/assets/img/search.svg" alt="" @click="goSearch" style="cursor: pointer;">
                </div>
                <img class="open" @click="showMob = true" v-if="!showMob" src="@/assets/img/open.png" alt="">
                <img class="close" @click="showMob = false" v-else src="@/assets/img/close.png" alt="">
            </div>
            <div class="menulist" :style="{height:showMob?'':0}">
                <span @click="goPage('/index')">首页</span>
                <span @click="showMenu('squn')">社群 <i :class="{ acticeI: showleftmenu == 'squn' }"
                        class="el-icon-arrow-right" /></span>
                <div class="fix_m" v-show="showleftmenu == 'squn'">
                    <div @click="goPage('/interact')" :class="{ active: path.includes('/interact') }"> 互动</div>
                    <div @click="goPage('/highQuality')" :class="{ active: path.includes('/highQuality') }"> 严选</div>
                    <div @click="goPage('/shareClub/list')" :class="{ active: path.includes('/shareClub') }">私享会</div>
                    <div @click="goPage('/Ranking')" :class="{ active: path.includes('/Ranking') }"> 排行榜</div>
                    <div @click="goPage('/firendCircle')" :class="{ active: path.includes('/firendCircle') }">朋友圈</div>
                    <div @click="goPage('/association/youping')" :class="{ active: path.includes('/association') }"> 我的
                    </div>
                </div>
                <span @click="goPage('/resource/column')">资源库</span>
                <span @click="showMenu('tzhi')">通知 <i :class="{ acticeI: showleftmenu == 'tzhi' }"
                        class="el-icon-arrow-right" /></span>
                <div class="fix_m" v-show="showleftmenu == 'tzhi'">
                    <div @click="goPage('/notice/messages')" :class="{ active: path == '/notice/messages' }"> 通知私信</div>
                    <div @click="goPage('/notice/application')" :class="{ active: path == '/notice/application' }"> 申请管理
                    </div>
                    <div @click="goPage('/notice/report')" :class="{ active: path == '/notice/report' }">举报管理
                    </div>
                </div>
                <span @click="showMenu('tguang')">推广 <i :class="{ acticeI: showleftmenu == 'tguang' }"
                        class="el-icon-arrow-right" /></span>
                <div class="fix_m" v-show="showleftmenu == 'tguang'">
                    <div @click="goPage('/promotion/article')" :class="{ active: path == '/promotion/article' }"> 社区严选
                    </div>
                    <div @click="goPage('/promotion/advert')" :class="{ active: path == '/promotion/advert' }"> 广告推广
                    </div>
                    <div @click="goPage('/promotion/groupBuy')" :class="{ active: path == '/promotion/groupBuy' }">专栏拼团
                    </div>
                </div>
                <span @click="showMenu('qbao')">钱包 <i :class="{ acticeI: showleftmenu == 'qbao' }"
                        class="el-icon-arrow-right" /></span>
                <div class="fix_m" v-show="showleftmenu == 'qbao'">
                    <div @click="goPage('/moneyBag/myBag')" :class="{ active: path == '/moneyBag/myBag' }"> 我的钱包</div>
                    <div @click="goPage('/moneyBag/detailInfo')" :class="{ active: path == '/moneyBag/detailInfo' }"> 收支明细
                    </div>
                    <div @click="goPage('/moneyBag/myGift')" :class="{ active: path == '/moneyBag/myGift' }"> 礼物打赏
                    </div>
                    <div @click="goPage('/moneyBag/helpSell')" :class="{ active: path == '/moneyBag/helpSell' }">我的佣金
                    </div>
                </div>
                <span @click="showMenu('zsc')">知识仓 <i :class="{ acticeI: showleftmenu == 'zsc' }"
                        class="el-icon-arrow-right" /></span>
                <div class="fix_m" v-show="showleftmenu == 'zsc'">
                    <div @click="goPage('/knowledge/column')" :class="{ active: path == '/knowledge/column' }"> 专栏</div>
                    <div @click="goPage('/knowledge/library')" :class="{ active: path == '/knowledge/library' }"> 文库</div>
                    <div @click="goPage('/knowledge/excerpt')" :class="{ active: path == '/knowledge/excerpt' }"> 摘抄
                    </div>
                    <div @click="goPage('/knowledge/comment')" :class="{ active: path == '/knowledge/comment' }">评论
                    </div>
                </div>
                <span v-if="!is_online" @click="openPop">登录/注册</span>
                <!-- <span v-if="is_online" @click.stop="command(1)">个人资料</span> -->
                <span v-if="is_online" @click.stop="command(2)">退出登录</span>
            </div>

        </div>
    </div>

</template>
<script>
import { baseUrl } from '@/apis/index'
import axios from 'axios';
import WxLogin from './WxLogin.vue';
export default {
    components: {
        WxLogin
    },
    name: 'mHeader',
    data() {
        return {
            showleftmenu: '',
            showMob: false,
            showPassword: false,
            wxAppId: 'wx1e87931839fe8862', // 你的微信AppID
            wxRedirectUri: 'http://ztk.yibi.com.cn', // 回调地址
            loading: false,
            bgimage: '',
            auimage: '',
            isShow: false,
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            dialogVisible5: false,
            downtime: 60,
            downtime2: 60,
            timer: '',
            account: '',
            password: '',
            userpass: '',
            uname: '',
            checked: false,
            code: '',
            newword: '',
            sureword: '',
            is_online: false,
            form: {
                mobile: '',
                sex: 1,
                wx: '已绑定微信WJ****21',
                signature: '',
                account: '',
                url: '',
                code: '',
                newphone: '',
                is_mobile: 0,
                auth_img: '',
                is_auth: false,
                password: ''
            },
            srcList: [],
            topic: [],
            imageUrl: '',
            keyword: '',
            uInfo: {},
            is_ok: false,
            nocheck: 0,
            userInfo: {},
            showInfo: false,
            is_mobile: 0
        }
    },
    watch: {
        info(n) {
            console.log(n);
        },
        userInfo(n) {

        },
        user: {
            handler(val) {
                this.userInfo = val
                this.is_online = true
            }, deep: true
        }
    },

    computed: {
        path() {
            return this.$route.path
        },
        isMobile() {
            return this.$store.getters.isMobile
        },

    },
    mounted() {
        // 测试 用于手动清除缓存
        // localStorage.clear()
        let token = localStorage.getItem('token');
        let user = localStorage.getItem('userInfo');
        // 登录信息
        if (token) {
            this.is_online = true
            this.userInfo = JSON.parse(user)
        }
        // 动态加载微信JS-SDK
        this.loadWxScript();

    },

    props: {
        list: {
            type: Array,
            default: () => {
                return []
            },
        },
        user: {
            type: Object,
            default: () => {
                return {}
            },
        },
        borderTop: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        showMenu(n) {
            if (this.showleftmenu == n) {
                this.showleftmenu = ''
            } else {
                this.showleftmenu = n
            }
        },
        // 0522 检查用户名是否为手机号
        checkAccount() {
            if (this.account) {
                let params = {
                    account: this.account
                }

                this.$api.checkAccount(params).then(res => {
                    if (res.data.code == 1) {
                        this.is_mobile = res.data.data
                    }
                })
            }

        },

        togglePassword() {
            this.showPassword = !this.showPassword
        },
        // 微信登录加载sdk
        loadWxScript() {
            return new Promise((resolve) => {
                if (document.getElementById('wxLoginScript')) {
                    resolve();
                    return;
                }

                const script = document.createElement('script');
                script.id = 'wxLoginScript';
                script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
                script.onload = resolve;
                document.body.appendChild(script);
            });
        },
        choseFile() {
            if (!this.form.is_auth) {
                this.$message({
                    message: '请勾选机构用户认证',
                    type: 'info'
                })
            }
        },
        beforeClose() {
            this.form = {
                mobile: '',
                sex: 1,
                wx: '已绑定微信WJ****21',
                signature: '',
                account: '',
                url: '',
                code: '',
                newphone: '',
                is_mobile: 0,
                auth_img: '',
                is_auth: false
            }
            console.log(this.form);

        },
        changeIsMobile(e) {
            this.$set(this.form, 'is_mobile', e)

        },
        //批量导入 / 文件上传
        onUpload_file: function (e) {
            var that = this;
            var file = e.target.files[0];
            var formdata = new FormData();
            console.log('file', file.name)
            formdata.append("file", file, file.name) //通过append向form对象添加
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    'XX-token': localStorage.getItem('token'),
                    'XX-Device-Type': 'web'
                }
            }
            axios.post(baseUrl + "user/upload/one", formdata, config).then(function (res) {
                console.log("image", res)
                if (res.data.code == 10001) {
                    setTimeout(function () {
                        window.location.href = "{:url('User/login/index')}"
                    }, 3000)
                }
                if (res.data.code == 0) {
                    return false;
                }
                if (res.data.code == 1) {
                    that.form.auth_img = res.data.data.url;
                    // that.form.thumb = res.data.data.filepath

                }
            }).catch(function (error) {
                console.log("error", error);
                return false;
            })
        },
        openPop() {
            this.dialogVisible = true
            this.account = ''
            this.code = ''
            this.password = ''
            this.userpass = ''
            this.is_ok = false
        },
        goOut() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        delImg() {
            this.imageUrl = ''
            this.srcList = []
        },
        onUploadauth: function (e) {
            var that = this;
            var file = e.target.files[0];
            var formdata = new FormData();
            formdata.append("file", file, file.name) //通过append向form对象添加
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    'XX-token': localStorage.getItem('token'),
                    'XX-Device-Type': 'web'
                }
            }
            axios.post(baseUrl + "user/upload/one", formdata, config).then(function (res) {
                console.log("image", res)
                if (res.data.code == 10001) {
                    setTimeout(function () {
                        window.location.href = "{:url('User/login/index')}"
                    }, 3000)
                }
                if (res.data.code == 0) {
                    return false;
                }
                if (res.data.code == 1) {
                    that.auimage = res.data.data.url;
                    that.srcList.push(res.data.data.preview_url)
                    // that.form.thumb = res.data.data.filepath

                }
            }).catch(function (error) {
                console.log("error", error);
                return false;
            })
        },
        onUploadbg: function (e) {
            var that = this;
            var file = e.target.files[0];
            var formdata = new FormData();
            formdata.append("file", file, file.name) //通过append向form对象添加
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    'XX-token': localStorage.getItem('token'),
                    'XX-Device-Type': 'web'
                }
            }
            axios.post(baseUrl + "user/upload/one", formdata, config).then(function (res) {
                console.log("image", res)
                if (res.data.code == 10001) {
                    setTimeout(function () {
                        window.location.href = "{:url('User/login/index')}"
                    }, 3000)
                }
                if (res.data.code == 0) {
                    return false;
                }
                if (res.data.code == 1) {
                    that.bgimage = res.data.data.url;
                    that.srcList.push(res.data.data.preview_url)
                    // that.form.thumb = res.data.data.filepath

                }
            }).catch(function (error) {
                console.log("error", error);
                return false;
            })
        },
        onUpload: function (e) {
            var that = this;
            var file = e.target.files[0];
            var formdata = new FormData();
            formdata.append("file", file, file.name) //通过append向form对象添加
            console.log('file是', file)
            console.log('formdata是', formdata)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    'XX-token': localStorage.getItem('token'),
                    'XX-Device-Type': 'web'
                }
            }
            axios.post(baseUrl + "user/upload/one", formdata, config).then(function (res) {
                console.log("image", res)
                if (res.data.code == 10001) {
                    setTimeout(function () {
                        window.location.href = "{:url('User/login/index')}"
                    }, 3000)
                }
                if (res.data.code == 0) {
                    return false;
                }
                if (res.data.code == 1) {
                    that.imageUrl = res.data.data.url;
                    that.srcList.push(res.data.data.preview_url)
                    that.form.thumb = res.data.data.filepath

                }
            }).catch(function (error) {
                console.log("error", error);
                return false;
            })
        },
        onsubmit2() {
            this.form.avatar = this.imageUrl
            this.form.bgimage = this.bgimage
            this.form.auth_img = this.auimage
            let params = this.form
            this.$api.updateUser({ ...params, mobile: this.form.newphone, is_auth: this.form.is_auth ? 1 : 0 }).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                    this.form = res.data.data
                    this.dialogVisible4 = false
                    this.userInfo = res.data.data
                    localStorage.setItem('userInfo', JSON.stringify(this.userInfo));

                }
            })


        },
        goSearch() {
            if (this.keyword) {
                this.$router.push({
                    path: '/searchAll',
                    query: {
                        keyword: this.keyword
                    }
                })
            } else {
                this.$message({
                    message: '请输入关键词',
                    type: 'error'
                })
            }



        },
        goPage(url, id) {
            this.$message.closeAll()
            if (!this.is_online && url != '/index'
                && url != '/interact'
                && url != '/resource/column'
            ) {
                this.$message({
                    message: '请先登录',
                    type: 'error'
                })
                return false;
            }

            let cid = this.$route.query.id
            if (this.path != url) {
                if (id && cid != id) {
                    this.$router.push({
                        path: url,
                        query: {
                            id
                        }
                    })
                } else {
                    this.$router.push({
                        path: url,
                    })
                }
            }
            this.showMob = false

        },
        // 账号登录
        login() {
            let params = {
                account: this.account,
                password: this.password
            }
            this.$api.login(params).then(res => {
                let response
                if (res.data.code == 1) {
                    response = res.data.data
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    })
                    let is_pass = this.checked
                    if (is_pass) {
                        const now = new Date();
                        const expiry = now.getTime() + 30 * 24 * 60 * 60 * 1000
                        // 30天免登录
                        localStorage.setItem('token', response.token, expiry);
                        localStorage.setItem('userInfo', JSON.stringify(response.user), expiry);
                        // this.setToekn30Days('token', response.token)
                        // this.setToekn30Days('userInfo', JSON.stringify(response.user))
                    } else {
                        // 设置正常缓存
                        localStorage.setItem('token', response.token);
                        localStorage.setItem('userInfo', JSON.stringify(response.user));
                    }
                    this.userInfo = response.user
                    // 已登录 关闭弹窗
                    this.is_online = true
                    this.dialogVisible = false
                    console.log(response)
                }
            })
        },
        getUser(val) {
            this.userInfo = val
        },
        // 账号注册
        register() {
            let params = {
                uname: this.uname,
                account: this.account,
                password: this.password,
                user_pass: this.userpass,
                code: this.code
            }
            this.$api.register(params).then(res => {
                let response
                if (res.data.code == 1) {
                    response = res.data.data
                    this.$message({
                        message: '注册成功',
                        type: 'success'
                    })

                    // 设置正常缓存
                    localStorage.setItem('token', response.token);
                    localStorage.setItem('userInfo', JSON.stringify(response.user));
                    this.userInfo = response.user
                    // 已登录 关闭弹窗
                    this.is_online = true
                    this.dialogVisible2 = false
                }
            })
        },

        // 忘记密码重置
        forget() {
            let params = {
                account: this.account,
                password: this.password,
                code: this.code
            }
            this.$api.forget(params).then(res => {
                let response
                if (res.data.code == 1) {
                    response = res.data.data
                    this.$message({
                        message: '重置密码成功',
                        type: 'success'
                    })
                    this.dialogVisible3 = false
                    this.dialogVisible = true

                }
            })
        },
        checkSHowINfo() {
            this.showInfo = !this.showInfo
            console.log(this.showInfo);

        },
        command(e) {
            this.checkSHowINfo()
            if (e == 1) {
                this.getUinfo()

                this.dialogVisible4 = true
                console.log(this.form);

            } else {
                localStorage.clear()
                this.is_online = false
                this.$message({
                    message: '退出成功',
                    type: 'success'
                })
                this.$router.push({
                    path: '/index',
                })
            }

        },
        getUinfo() {
            this.$api.getUserInfo().then(res => {
                if (res.data.code == 1) {
                    this.uInfo = res.data.data
                    this.imageUrl = this.uInfo.avatar
                    this.bgimage = this.uInfo.bgimage
                    this.form = { ...this.form, ...res.data.data }
                    if (this.uInfo.is_auth) {
                        this.auimage = this.uInfo.auth_img

                    }
                }
            })
        },

        // 设置缓存30天
        setCache30days(key, value, expirationDays = 30) {

            const now = new Date();
            const item = {
                value: value,
                expiry: now.getTime() + expirationDays * 24 * 60 * 60 * 1000 // 计算过期时间的时间戳
            };
            localStorage.setItem(key, JSON.stringify(item));
        },

        setToekn30Days(key, value, expirationDays = 30) {
            const now = new Date();
            const expiry = now.getTime() + expirationDays * 24 * 60 * 60 * 1000

            localStorage.setItem(key, JSON.stringify(value), expiry);
        },
        // 发送短信验证码
        getSmsSend() {
            this.loading = true

            let params = {
                account: this.account,
                nocheck: this.nocheck
            }
            this.$api.smsSend(params).then(res => {
                let response
                this.loading = false
                if (res.data.code == 1) {
                    response = res.data.data
                    this.timer = setInterval(() => {

                        if (this.downtime > 0) {
                            this.downtime = this.downtime - 1
                            return
                        } else {
                            this.downtime = 60
                            this.timer = null;
                            clearTimeout(this.timer)
                        }
                    }, 1000)
                }

                // else {
                //     this.downtime = 60
                // }

            })
        },
        // 发送短信验证码
        getSmsSend2() {
            this.loading = true

            let params = {
                account: this.form.newphone,
                nocheck: 0
            }
            this.$api.smsSend(params).then(res => {
                let response
                this.loading = false
                if (res.data.code == 1) {
                    response = res.data.data
                    this.timer = setInterval(() => {

                        if (this.downtime2 > 0) {
                            this.downtime2 = this.downtime2 - 1
                            return
                        } else {
                            this.downtime2 = 60
                            this.timer = null;
                            clearTimeout(this.timer)
                        }
                    }, 1000)
                } else {
                    this.downtime2 = 60
                }
            })
        },
        // 点击获取验证码
        getDown(nocheck) {
            this.nocheck = nocheck
            if (!this.account) {
                this.$message({
                    message: '请输入账号',
                    type: 'error'
                })
                return
            }

            if (this.timer) {
                return
            }

            this.getSmsSend()
        },
        // 点击获取验证码
        getDown2(nocheck) {
            this.nocheck = nocheck
            if (!this.form.newphone) {
                this.$message({
                    message: '请输入新手机号',
                    type: 'error'
                })
                return
            }

            if (this.timer) {
                return
            }

            this.getSmsSend2()
        },
        // 重置页面填写值

        reset() {
            this.account = ''
            this.password = ''
            this.user_pass = ''
            this.uname = ''
            this.code = ''
        },

        openReset() {
            this.reset()

            this.dialogVisible = false;
            this.dialogVisible3 = true;
            this.is_ok = false
        },

        openResj() {
            this.reset()
            this.dialogVisible = false;
            this.dialogVisible2 = true;
            this.is_ok = false
        },
        openLogin() {
            this.reset()

            this.dialogVisible2 = false;
            this.dialogVisible3 = false;
            this.dialogVisible = true;
        }
    }
}
</script>
<style lang="scss" scoped>
.myheader {
     position: -webkit-sticky;
    box-sizing: content-box;
    position: sticky;
    z-index: 20000;
    width: 100%;
    margin: 0 auto;
    top: 0;
    background-color: #fff;

}

.mheader {
    box-sizing: content-box;
    height: 98px;
    width: 1600px;
    margin: 0 auto;
    display: flex;
    left: 0;
    right: 0;
    align-items: center;
    background-color: #fff;
    z-index: 9;
    // padding: 0 calc((100vh - 1600px) / 2);

    div {
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .logo-box {
        margin-right: 4.11rem;
        display: flex;
        align-items: center;

        .logo {
            width: 8.85rem;
            height: 2.5rem;
        }
    }

    .classify {
        font-weight: bold;
        font-size: 1.25rem;
        color: #333333;



        span {
            cursor: pointer;

            &:hover {
                color: #1068E7;
            }

            &:nth-child(2) {
                margin: 0 2.2rem;
            }
        }
    }

    .search {
        margin-left: 4.4rem;
        position: relative;
        width: 18.75rem;
        height: 2.5rem;
        display: flex;
        align-items: center;

        img {
            width: 1.2rem;
            height: 1.2rem;
            position: absolute;
            top: calc(50% - 0.6rem);
            right: 1.2rem;
        }

        input {
            width: 18.75rem;
            height: 2.5rem;
            outline: none;
            background: #F6F6F6;
            border-radius: 1.25rem;
            padding: 0 3rem 0 1.2rem;
            box-sizing: border-box;
            font-size: 1rem;
            border: none;
            border: 1px solid #F6F6F6;

            &:focus {
                border: 1px solid #1068E7;
            }
        }

        .pla {
            font-weight: 400;
            font-size: 0.83rem;
            color: #666666;
        }
    }

    .column {
        font-size: 1.04rem;
        color: #333333;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;

        span {
            cursor: pointer;
            padding: 0 0.8rem;
            font-weight: 400;
            line-height: 1.25rem;
            border-left: 2px solid #333333;

            &:hover {
                color: #1068E7;
            }

            &:first-child {
                border: none;
                padding-left: 0;

            }

            &:last-child {
                padding-right: 0;
            }
        }
    }

    .loginBtn {
        .logignBtn {
            cursor: pointer;
            width: 121px;
            height: 2.24rem;
            border-radius: 1.09rem;
            border: 2px solid #4A91F8;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 0.83rem;
            position: relative;
            color: #1068E7;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;

            .dropdown {
                position: absolute;
                top: 2.36rem;
                width: 121px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                left: 0;
                text-align: center;
                border-radius: 8px;
                // box-shadow: 2px 1px 12px 1px #8c939d;
                height: 0;
                overflow: hidden;
                background-color: #fff;
                transition: height 0.1s ease-in-out;

                >span {
                    display: inline-block;
                    color: #000;
                    padding: 5px 0;
                    font-size: 0.83rem;

                    &:hover {
                        color: #1068E7;
                    }
                }
            }

            .activeDown {
                height: 70px;
                /* 或 auto */
            }

            span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 100px;
            }

            i {
                flex-shrink: 0;
                margin-left: 5px;
            }
        }
    }
}

.dialog {

    ::v-deep .el-dialog {
        border-radius: 1rem;

        .el-dialog__header {
            padding: 1.8rem 1.8rem 0.9rem;
        }

        .el-dialog__body {
            padding: 1.8rem 1.8rem 2.7rem;
        }
    }

    .dia4 {
        width: 60%;

        ::v-deep .el-input-group__append,
        .el-input-group__prepend {
            width: 70px;
            height: 12px !important;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            background-color: #3FABD9;
        }

        .set {
            display: flex;
            align-items: center;

            ::v-deep .el-input {
                width: auto;
            }

            >span {
                cursor: pointer;

                &:last-child {
                    flex: 1;
                    width: 120px;
                    display: block;
                    font-weight: 400;
                    font-size: 14px;
                    color: #D41F19;
                }
            }
        }

        ::v-deep .el-form {
            .el-form-item__label {
                font-size: 14px;
                color: #999;
            }

            .el-radio__input.is-checked .el-radio__inner {
                border-color: #FF0000;
                background: #FF0000;
            }

            .el-textarea__inner {
                font-weight: 400;
                font-size: 16px;
                color: #1A1A1A;
                font-weight: bold;
            }

            .el-radio__input.is-checked+.el-radio__label {
                color: #FF0000;
            }

            .el-input__inner {
                border: none;
                font-weight: 400;
                font-size: 16px;
                color: #1A1A1A;
                font-weight: bold;

            }

            .borBom {
                .el-input__inner {
                    border: none;
                    border-bottom: 1px solid #BDBDBD;
                }

                .btnnext {
                    margin-top: 10px;

                    .el-form-item__content .el-button {
                        width: auto;
                    }
                }

            }

            .uploadBg {
                .el-form-item__content {
                    height: 100px;
                }



                .el-form-item__label {
                    line-height: 100px;
                }
            }


            .upload {
                .el-form-item__content {
                    height: 100px;
                }



                .el-form-item__label {
                    line-height: 100px;
                }
            }
        }
    }


    .dia_main,
    .dia_main2,
    .dia_main3 {
        display: flex;

        >div {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;

            .title {
                font-size: 1.3rem;
                font-weight: bold;
                color: #000;
                padding: .8rem 1.5rem;
            }
        }

        .left {
            border-right: 1px solid #EFEFEF;

            ::v-deep {
                .iframe {
                    width: 200px !important;
                    height: 300px !important;
                }
            }

            .title {
                padding: .8rem 1.5rem;
                border-radius: 1.5rem;
                background-color: #F0F3FE;
                margin-bottom: 4rem;
            }

            >img {
                width: 10.42rem;
                height: 10.42rem;
                margin-bottom: 3rem;
            }

            .we {
                display: flex;
                align-items: center;

                font-size: 0.8rem;

                img {
                    width: 1.5rem;
                    height: 1.5rem;
                }

                span {
                    font-weight: bold;
                    font-size: 1rem;
                    margin-right: 0.4rem;
                }
            }

            .collect {
                display: flex;
                align-items: center;
                font-size: 0.8rem;
                margin-top: 4rem;
                flex: 1;
                align-items: flex-end;
                color: #666666;
                text-decoration: none;

                img {
                    width: 1.0rem;
                    height: 1.0rem;
                }
            }
        }

        .right {
            padding: 0 3rem;

            .title {
                margin-bottom: 3.5rem;
            }

            .input {
                padding: 0 0.5rem;
                margin-bottom: 2.76rem;
                width: 100%;

                ::v-deep .el-input {
                    margin-bottom: 1rem;
                    height: 3rem;
                    width: 100%;

                    .el-input__inner {
                        font-size: 0.9rem;
                        border-radius: 1.5rem;
                        background-color: #F7F7F7;
                        height: 3rem;
                        width: 100%;

                    }
                }

                .check {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 0.83rem;
                    color: #666666;

                    // ::v-deep .el-checkbox__label {
                    //     font-weight: 400;
                    //     font-size: 0.83rem;
                    //     color: #666666;
                    //     padding-left: 0.5rem;
                    // }

                    // ::v-deep .el-checkbox__inner {
                    //     width: 0.83rem;
                    //     height: 0.83rem;
                    // }

                    span {
                        cursor: pointer;
                    }
                }
            }

            ::v-deep .el-button {
                width: 100%;
                font-size: 1rem;
                height: 3rem;
                line-height: 3rem;
                padding: 0;
                border-radius: 1.5rem;
            }

            .resj {
                cursor: pointer;
                display: flex;
                align-items: center;
                font-size: 0.8rem;
                margin-top: 5.4rem;
                flex: 1;
                align-items: flex-end;
            }
        }

    }

    .dia_main2,
    .dia_main3 {
        .right {
            width: 100%;
            padding: 0 2rem;

            .title {
                margin-bottom: 2rem;
                padding-top: 0;
            }

            .input {
                padding: 0 0.2rem;
                margin-bottom: 2.76rem;

                .getCode {
                    font-size: 0.9rem;
                }

                ::v-deep .el-input {
                    margin-bottom: 1rem;
                    height: 3rem;
                    width: 100%;
                    display: flex;

                    .el-input-group__append {
                        padding: 0 1rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 3rem;
                        width: 10.5rem;

                    }

                    .el-input__inner {
                        font-size: 0.9rem;
                        border-radius: 0 !important;
                        background-color: #F7F7F7;
                        height: 3rem;
                        width: 100%;
                        display: inline-block;
                    }
                }

                .check {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 0.83rem;
                    color: #666666;

                    ::v-deep .el-checkbox__label {
                        font-weight: 400;
                        font-size: 0.83rem;
                        color: #666666;
                        padding-left: 0.5rem;
                    }

                    ::v-deep .el-checkbox__inner {
                        width: 0.83rem;
                        height: 0.83rem;
                    }

                    span {
                        cursor: pointer;
                    }
                }
            }

            .resj {
                margin-top: 3rem;
            }
        }

    }
}

.active {
    color: #1068E7;
}

.dialog-header {
    font-weight: bold;
    font-size: 22px;

    i {
        font-size: 22px;
    }
}

.dialog-footer {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        margin: 0 50px;
        width: 240px;
        height: 50px;
        font-size: 18px;
        line-height: 50px;
        padding: 0;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}


.avatar-uploader-icon {
    font-size: 2rem;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    border: 0.01rem dashed #8c939d;
    position: relative;

    >img {
        width: 10rem;
        height: 10rem;
        border-radius: 10px;
    }

    .close {
        font-size: 30px;
        position: absolute;
        top: -15px;
        right: -15px;
        z-index: 2;
    }


}

.avatar {
    width: 10rem;
    height: 10rem;
    display: block;
}


.bg-uploader-icon {
    font-size: 2rem;
    color: #8c939d;
    width: 160px;
    height: 90px;
    line-height: 100px;
    // border-radius: 50%;
    text-align: center;
    border: 0.01rem dashed #8c939d;
    position: relative;

    >img {
        width: 10rem;
        height: 10rem;
    }

    .close {
        font-size: 30px;
        position: absolute;
        top: -15px;
        right: -15px;
        z-index: 2;
    }


}

.bg {
    width: 10rem;
    height: 10rem;
    display: block;
}

.upload {
    display: flex;
    align-items: center;

    label {
        margin-right: 3rem;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        font-size: 1rem;
        color: #1a1a1a;

        input[type=file] {
            display: none;
            opacity: 0;
        }

        img {
            display: block;
            margin: 0 auto 0.8rem;
        }
    }
}

.qfile {
    display: flex;
    align-items: center;

    div {
        width: 100px;
        height: 30px;
        font-size: 14px;
        border: 1px solid #999;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #808080;
        margin-right: 5px;
    }

    span {
        font-size: 14px;
        color: #808080;
        line-height: 20px;
    }
}

.mobheader {
    box-sizing: content-box;
    // position: sticky;
    z-index: 200;
    width: 100%;
    margin: 0 auto;
    // top: 0;
    height: 250px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // padding: 60px;
    .logo-box {
        padding: 60px;
    }

    .logo {
        width: 450px;
        height: auto;
    }

    .right {
        display: flex;
        align-items: center;
        padding-right: 60px;
        flex: 1;
        justify-content: space-between;

        .search {
            margin-right: 60px;
            position: relative;
            flex: 1;
            height: 180px;
            display: flex;
            align-items: center;

            img {
                width: 100px;
                height: auto;
                position: absolute;
                top: calc(50% - 50px);
                right: 50px;
            }

            input {
                flex: 1;
                height: 100%;
                outline: none;
                background: #F6F6F6;
                border-radius: 40px;
                padding: 0 120px 0 30px;
                box-sizing: border-box;
                font-size: 65px;
                border: none;
                border: 1px solid #F6F6F6;

                &:focus {
                    border: 1px solid #1068E7;
                }
            }

            .pla {
                font-weight: 400;
                font-size: 0.83rem;
                color: #666666;
            }
        }

        .sea {
            width: 100px;
            height: auto;
            margin-right: 120px;
        }

        .open {
            width: 160px;
            height: 160px;
        }

        .close {
            width: 110px;
            height: 110px;
            padding-left: 50px;
            box-sizing: content-box;
        }
    }

    .menulist {
        position: fixed;
        z-index: 102;
        background-color: #1068E7;
        top: 250px;
        width: 100%;
        height: calc(100vh - 250px);
        left: 0;
        overflow-y: auto;
        transition: all 0.3s;
        .fix_m {
            overflow: hidden;
            background-color: #fff;
            color: #666666;
            font-size: 80px;

            >div {
                text-align: center;
                padding: 100px 0;
                border-bottom: 1px dashed #666666;
            }
        }

        @keyframes rotate90 {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(90deg);
            }
        }

        .acticeI {
            animation: rotate90 0.3s ease-in-out forwards;
        }

        span {
            display: block;
            padding: 100px 0;
            text-align: center;
            color: #fff;
            font-size: 80px;
            position: relative;
            line-height: 80px;
            border-bottom: 1px dashed #fff;

            i {
                position: absolute;
                right: 140px;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .dialog {

        .dia_main,
        .dia_main2,
        .dia_main3 {
            .right {
                zoom: 1.5;

                .resj {
                    font-size: 10px;
                }

                .title {
                    font-size: 14px;
                }

                .input {
                    ::v-deep .el-input {
                        height: 25px;

                        input {
                            height: 100% !important;
                            font-size: 10px !important;
                        }
                    }

                    .check {
                        span {
                            font-size: 10px;
                        }
                    }

                    .getCode {
                        font-size: 10px;
                    }
                }

                .el-button {
                    height: 30px;
                    font-size: 12px;
                }

                ::v-deep .el-checkbox__inner {
                    width: 8px;
                    height: 8px;
                }
            }
        }
    }

    ::v-deep .el-dialog__headerbtn {
        font-size: 18px;
    }

    ::v-deep .el-checkbox__label {
        font-size: 7px;
        line-height: 12px;
    }

    ::v-deep .el-checkbox {
        font-size: 7px;
    }

    ::v-deep .el-checkbox__inner::after {
        width: 2px;
        left: 2px;
        height: 3px;
    }

    .dialog .dia_main3 .right .input {
        ::v-deep .el-input .el-input-group__append {
            width: 80px;
            height: 25px;
        }
    }
}
</style>